Css Samples

CSS SAMPLES
http://www.w3schools.com/css/css_examples.asp
1. LIST : Set an image as the list-item marker

<html>
<head>
<style type="text/css">
ul
{
list-style-image: url('arrow.gif')
}
</style>
</head>
<body>
Note: Netscape 4 does not support the "list-style-image" property.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
2. LIST: Place the list-item marker

<html>
<head>
ul.inside
{
list-style-position: inside
}
ul.outside
{
list-style-position: outside
}
</style>
</head>
<body>
Note: Netscape 4 does not support the "list-style-position" property.
This list has a value of

"inside":
<ul class="inside">
<li>
Earl Grey Tea - A fine black tea, fermented to perfection in a complementary blend of
bergamot oil. This combination creates an ultra fine tea where precision and process
gives birth to this much-revered beverage.
</li>
<li>
Jasmine Tea - A fabulous "all purpose" tea made of freshly picked, organic camellia
sinensis (green tea) and jasmine flowers.
</li>
<li>
Honeybush Tea - A super fruity delight that is naturally sweet and almost unbelievable!
This magnificent tea imported from the Cape of Good Hope has a smooth and fruitful
body that reminds us of those tangy tea blends currently on the market. However it
should be pointed out that this is completely free of flavoring agents and other
ingredients.
</li>
</ul>
This list has a value of

"outside":
<ul class="outside">
<li>
Earl Grey Tea - A fine black tea, fermented to perfection in a complementary blend of
bergamot oil. This combination creates an ultra fine tea where precision and process
gives birth to this much-revered beverage.
</li>
<li>
Jasmine Tea - A fabulous "all purpose" tea made of freshly picked, organic camellia
sinensis (green tea) and jasmine flowers.
</li>
<li>
Honeybush Tea - A super fruity delight that is naturally sweet and almost unbelievable!
This magnificent tea imported from the Cape of Good Hope has a smooth and fruitful
body that reminds us of those tangy tea blends currently on the market. However it
should be pointed out that this is completely free of flavoring agents and other
ingredients.
</li>
</ul>
</body>
</html>
3. LIST: All list properties in one declaration
ul
{
list-style-type:square; list-style-position:inside; list-style-image:url('arrow.gif');
}
</style>
</head>
<body>
Note: Netscape 4 does not display the images or position the list.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
4. Classification: Let the first letter of a paragraph float to the left

<html>
<head>
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
</head>
<body>

This is some text.
This is some text. This is some text.
This is some text. This is some text. This is some text.


In the paragraph above, the first letter of the text is embedded in a span element.
The span element has a width that is 0.7 times the size of the current font.
The font-size of the span element is 400% (quite large) and the line-height is 80%.
The font of the letter in the span will be in "Algerian".

</body>
</html>
5. Classification: Creating a horizontal menu
<html>
<head>
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>
<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

In the example above, we let the ul element and the a element float to the left.
The li elements will be displayed as inline elements (no line break before or after the
element). This forces the list to be on one line.
The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6
times the size of the current font).
We add some colors and borders to make it more fancy.

</body>
</html>
6. Classification: Change the cursor

<html>
<body>

Note: Netscape 4 does not support the "cursor" property.


Move the mouse over the words to see the cursor change.


Auto 

Crosshair 

Default 

Pointer 

Move 

e-resize 

ne-resize 

nw-resize 

n-resize 

se-resize 

sw-resize 

s-resize 

w-resize 

text 

wait 

help
</body>
</html>
7. Positioning : Place an element "behind" another element 2
<html>
<head>
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>
<body>
Note: Netscape 4 does not support the "z-index" property.
<h1>This is a Heading</h1>
<img class="x" src="bulbon.gif" width="100" height="180">
Default z-index is 0. Z-index 1 has higher priority.

</body>
</html>
8. Pseudo-elements : Make the first line special in a text
<html>
<head>
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}
a.two:link {color: #ff0000}

a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}
a.three:link {color: #ff0000}

a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}
a.four:link {color: #ff0000}

a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}
a.five:link {color: #ff0000; text-decoration: none}

a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}
</style>
</head>
<body>
Mouse over the links to see them change layout.
<a class="one" href="default.asp" target="_blank">This link changes

color</a>
<a class="two" href="default.asp" target="_blank">This link changes font-
size</a>
<a class="three" href="default.asp" target="_blank">This link changes
background-color</a>
<a class="four" href="default.asp" target="_blank">This link changes font-
family</a>
<a class="five" href="default.asp" target="_blank">This link changes text-
decoration</a>
</body>
</html>
9.0.1 The @media rule
An @media rule specifies the target media types (separated by commas) of a set of
rules (delimited by curly braces). The @media construct allows style sheet rules for
various media in the same style sheet:
@media print {
BODY { font-size: 10pt }
}
@media screen {
BODY { font-size: 12pt }
}
@media screen, print {
BODY { line-height: 1.2 }
}
The normal Style:
.test
{
//font related stuffs
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000033;
font-style: italic;
line-height: normal;
font-weight: bold;
text-transform: none;
font-variant: small-caps;
text-decoration: underline;
//background related stufff
background-color: #CCCCFF;
background-image: url(file:///D|
/Project/Diamdel/WebContent/images/banner_locationsbg.gif);
background-attachment: fixed;
background-repeat: no-repeat;
//block related stuff

word-spacing: normal;
letter-spacing: normal;
text-align: left;
vertical-align: middle;
white-space: normal;
display: block; inline;
//border related stuff

border-top-color: #000066;
border-top-style: solid;
border-top-width: 2px;
border-right-color: #006633;
border-right-style: dashed;
border-right-width: 3px;
border-bottom-color: #0000CC;
border-bottom-style: dotted;
border-bottom-width: 3px;
border-left-color: #CCCCCC;
border-left-style: double;
border-left-width: 2px;
//Box related stuff
width: auto;
height: auto;
clear: both;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
padding: 2;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
//List related stuffs
llist-style-type: circle;
list-style-image: url(images/arrowdouble.gif);
list-style-position: inside; outside;
//position related stuffs
position: relative;
visibility: visible;
left: auto;
bottom: auto;
//Extensions
cursor: pointer;
}
Out of Scope:
Body {
scrollbar-3dlight-color: #999999;
scrollbar-arrow-color: #EDEDED;
scrollbar-face-color: #BAB8B9;
scrollbar-track-color: #D4D4D4;
font-family:times;
}
//Div scroll color style
.scrolldiv {
BORDER-RIGHT: #333333 2px solid;
BORDER-LEFT: #333333 2px solid;
scrollbar-3dlight-color: #999999;
scrollbar-arrow-color: #EDEDED;
scrollbar-face-color: #BAB8B9;
scrollbar-track-color: #D4D4D4;
}
//TextBox style
.TextBox
{
border:1px solid #7F9DB9;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
height: 17px;
}
//Button style
.BTN
{
background-color: #7DA7DF;
border-bottom:2px solid #666666;
border-right:2px solid #666666;
border-left:2px solid #cccccc;
border-top:2px solid #cccccc;
color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
}
BODY
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
form{margin:0;} //To avoid form occupying extra space

Css Samples

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css Samples

Uploaded by

Copyright:

Available Formats

CSS SAMPLES

1. LIST : Set an image as the list-item marker

<p><b>Note:</b> Netscape 4 does not support the "list-style-image" property.</p>

2. LIST: Place the list-item marker

<p><b>Note:</b> Netscape 4 does not support the "list-style-position" property.</p>

<p>This list has a value of

<p>This list has a value of

3. LIST: All list properties in one declaration

4. Classification: Let the first letter of a paragraph float to the left

5. Classification: Creating a horizontal menu

6. Classification: Change the cursor

7. Positioning : Place an element "behind" another element 2

<p><b>Note:</b> Netscape 4 does not support the "z-index" property.</p>

<p>Default z-index is 0. Z-index 1 has higher priority.</p>

a.two:link {color: #ff0000}

a.three:link {color: #ff0000}

a.four:link {color: #ff0000}

a.five:link {color: #ff0000; text-decoration: none}

<p><b><a class="one" href="default.asp" target="_blank">This link changes

9.0.1 The @media rule

The normal Style:

//background related stufff

//block related stuff

//border related stuff

//Box related stuff

//List related stuffs

//position related stuffs

form{margin:0;} //To avoid form occupying extra space

You might also like